<template>
	<view class="container">
		<view v-if="success==0">
			<!-- 表单 -->
			<uni-forms ref="form" :model="invoice" labelWidth="80px">
				<uni-forms-item label="抬头类型" name="accountBank" required>
					<view style="height: 100%; display: flex; align-items: center;">
						<uni-data-checkbox selectedTextColor="" v-model="invoice.accountBank" :localdata="types" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="发票抬头" name="enterpriseUnit" required>
					<uni-easyinput v-model="invoice.enterpriseUnit" placeholder="请输入公司名称" />
				</uni-forms-item>
				<view v-if="invoice.accountBank==1">
					<uni-forms-item label="公司税号" name="taxNumber" required>
						<uni-easyinput v-model="invoice.taxNumber" placeholder="填写纳税人识别号" />
					</uni-forms-item>
					<uni-forms-item label="注册地址" name="registerAddress">
						<uni-easyinput v-model="invoice.registerAddress" placeholder="填写公司注册地址" />
					</uni-forms-item>
					<uni-forms-item label="注册电话" name="numberPhone">
						<uni-easyinput v-model="invoice.numberPhone" placeholder="填写公司注册电话" />
					</uni-forms-item>
					<uni-forms-item label="开户银行" name="registerBank">
						<uni-easyinput v-model="invoice.registerBank" placeholder="填写公司开户银行" />
					</uni-forms-item>
					<uni-forms-item label="银行卡号" name="accountOpening">
						<uni-easyinput v-model="invoice.accountOpening" placeholder="填写开户行卡号" />
					</uni-forms-item>
				</view>
			</uni-forms>
			<view class="footer">
				<button class="button" @click="submit">提 交</button>
			</view>
		</view>

		<rf-toast :show="success" @click="success = false" :isSus="isSus" :title="isSus ? '发票信息提交成功' : '发票信息提交失败'"
			des="请到开票列表查看发票状态"></rf-toast>


	</view>
</template>
<script>
	import {
		getNoticeList,
		postInvoicing
	} from "@/api/user.js"
	export default {
		data() {
			return {
				success: false,
				isSus: false,

				invoice: {
					orderId: "", // 订单ID
					accountBank: "0", // 银行账号：0企业单位、1个人/非企业单位
					enterpriseUnit: "", // 企业单位
					taxNumber: "", // 公司税号
					registerAddress: "", // 注册地址
					numberPhone: "", //  注册电话
					registerBank: "", // 开户银行
					accountOpening: "", // 银行账号
				},
				// 发票类型
				types: [{
					text: '个人/非企业单位',
					value: "0"
				}, {
					text: '企业单位',
					value: "1"
				}],
				rules: {
					enterpriseUnit: {
						rules: [{
							required: true,
							errorMessage: '发票抬头不能为空'
						}]
					},
					taxNumber: {
						rules: [{
							required: true,
							errorMessage: '纳税人识别号不能为空'
						}]
					}
				}
			};
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			const orderId = options.orderId;
			console.log("asdfasdfasd", orderId);
			this.invoice.orderId = orderId;
		},
		methods: {
			submit(ref) {
				// this.$modal.msgSuccess("修改成功")

				this.$refs.form.validate().then(res => {
					console.log('form发生了submit事件，携带数据为：' + JSON.stringify(this.invoice))

					postInvoicing(this.invoice).then(response => {
						this.isSus = true
						this.success = true
						setTimeout(() => {
							this.success = false
							uni.navigateBack()
						}, 1500)
						console.log("response: " + JSON.stringify(response));
					}).catch(err => {
						console.log(err);
						this.isSus = false
						this.success = true
					})
				})
			}
		}

	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.container {
		padding: 10px 20px;

		.success {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			width: 80%;


			.icon {
				width: 100%;
				margin-top: 10vw;

				image {
					width: 25vw;
					height: 25vw;
				}
			}

			.tis {
				width: 100%;
				text-align: center;
				margin-top: 20upx;
				font-size: 48upx;
			}

			.pay-amount {
				width: 100%;
				text-align: center;
				margin-top: 10upx;
				font-size: 23rpx;
			}

			.back {
				position: absolute;
				bottom: 80rpx;

				.btn {
					display: flex;
					align-items: center;
					padding: 0 50rpx;
					height: 70rpx;
					border: solid 2rpx #58C866;
					color: #58C866;
					border-radius: 10rpx;
					font-size: 24rpx;

				}
			}
		}
	}

	.footer {
		position: absolute;
		bottom: 100rpx;
		left: 20px;
		right: 20px;

		.button {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 88rpx;
			border-radius: 44rpx;
			background: #58C866;
			color: #ffffff;

		}
	}
</style>